<template>
  <div class="text-xs pb-5 flex" v-for="item in option" :key="item.value">
    <div class="flex-shrink-0 text-slate-400">{{ item.label }}：</div>
    <div class="ml-3 flex">
      <el-space wrap :size="20">
        <div
          class="icon-hover px-1 py-0.5"
          :class="{
            active: isActive(item.value, sub.value),
          }"
          v-for="sub in item.option"
          :key="item.value"
          @click="toggleClick(item.value, sub.value)"
        >
          {{ sub.label }}
        </div>
      </el-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { Option, Type } from '@/types/common/common.ts'

const props = defineProps<{
  option: Option[]
  type: number
  area: number
  initial: string
}>()

const emit = defineEmits<{
  (e: 'toggleClick', value: Type, subValue: string | number): void
}>()

const isActive = computed(() => (value: string, subValue: string | number) => {
  return (
    (value === 'area' && subValue === props.area) ||
    (value === 'type' && subValue === props.type) ||
    (value === 'initial' && subValue === props.initial)
  )
})
const toggleClick = (value: Type, subValue: string | number) => {
  emit('toggleClick', value, subValue)
}
</script>

<style lang="less" scoped>
.active {
  @apply bg-emerald-400 text-white rounded;
}
</style>
